<template>
  <div class="order-manage">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="我的订单" name="first">
        <OrderTable :timeList="timeList" :tableHeight="tableHeight"/>
      </el-tab-pane>
      <el-tab-pane label="智币记录" name="second" v-if="showZb" lazy>
        <ZbTable :timeList="timeList"/>
      </el-tab-pane>
      <el-tab-pane label="AI能量明细" name="second" v-else-if="showEnergy" lazy>
        <EnergyTable :timeList="timeList" :tableHeight="tableHeight"/>
      </el-tab-pane>
      <el-tab-pane label="兑换记录" name="third" lazy>
        <ExchangeTable :timeList="timeList" :tableHeight="tableHeight"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import OrderTable from './components/order-table.vue'
import ZbTable from './components/zb-table.vue'
import EnergyTable from './components/energy-table.vue'
import ExchangeTable from './components/exchange-table.vue'
import { parseTime } from '@/utils'
import { isPassVersionByApp, isPassVersion } from '@/utils/judge'
export default {
  name: 'OrderList',
  components: {
    OrderTable,
    ZbTable,
    ExchangeTable,
    EnergyTable
  },
  data () {
    return {
      showZb: false,
      showEnergy: false,
      activeName: 'first',
      timeList: [],
      tableHeight: ''
    }
  },
  computed: {
    ...mapGetters(['appInfo'])
  },
  activated () {
    const query = this.$route.query
    if (query.status === '2') {
      this.activeName = 'first'
    } else if (query.status === '3') {
      this.activeName = 'second'
    }
  },
  created () {
    const now = new Date()
    const nowStr = parseTime(now)
    const oneM = parseTime(now.setMonth(now.getMonth() - 1))
    const threeM = parseTime(now.setMonth(now.getMonth() - 2))
    const sixM = parseTime(now.setMonth(now.getMonth() - 3))
    const oneY = parseTime(now.setMonth(now.getMonth() - 6))
    const list = [
      { orderId: 1764, exchangeId: 1775, zbId: 24002, name: '全部', begin_date: null, end_date: null },
      { orderId: 1765, exchangeId: 1776, zbId: 24003, name: '近1个月', begin_date: oneM, end_date: nowStr },
      { orderId: 1766, exchangeId: 1777, zbId: 24004, name: '近3个月', begin_date: threeM, end_date: nowStr },
      { orderId: 1767, exchangeId: 1778, zbId: 24005, name: '近6个月', begin_date: sixM, end_date: nowStr },
      { orderId: 1768, exchangeId: 1779, zbId: 24006, name: '近1年', begin_date: oneY, end_date: nowStr }
    ]
    this.timeList = list
    this.showZb = isPassVersionByApp({ '22': { v: '3.1.6', maxV: '3.1.6.32' } })

    this.showEnergy = isPassVersionByApp({
      '22': { v: '3.3.0.14' },
      '111': { v: '3.2.10.0' }
    })

    this.tableHeight = isPassVersion('3.3.0.14') ? '470px' : '370px'
  },
  methods: {
    handleClick (tab) {
      if (tab.name === 'first') {
        this.$xz('xz_substat_action', 1763)
      } else if (tab.name === 'third') {
        this.$xz('xz_substat_action', 1774)
      } else if (tab.name === 'second') {
        if (this.showZb) {
          this.$xz('xz_substat_action', 24000)
          this.$refs.zbTab && this.$refs.zbTab.getList()
        } else {
          // #un 待补充埋点
        }
      }
    }
  }
}
</script>
<style lang="scss">
.order-manage{
  padding-bottom: 5px;
}
.order-table{
  th{
    background: rgba($color: #fff, $alpha: 0.05);
    &.order-last-header{
      border-radius: 0 4px 4px 0;
    }
    &:first-child {
      border-radius: 4px 0 0 4px;
    }
  }
  .cell{
    padding-left: 5px;
    padding-right: 5px;
  }
  tbody tr:hover{
    color: #00BBD7;
  }
}
.order-dropdown-box{
  position: absolute;
  right: 0;
  top: -30px;
  z-index: 9;
  font-size: 12px;
  .xz-dropdown-link{
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    outline: none;
    &:hover{
      color: #00BBD7;
    }
    .svg-icon{
      margin-left: 2px;
    }
  }
}
.order-manage{
  .el-loading-mask{
    background-color: rgba($color: #fff, $alpha: 0.1);
  }
}
.order-pagination{
  text-align: right;
  margin-top: 10px;
}
</style>
